<template>
    <svg
        :class="svgClass"
        :style="{color: color,width,height}"
        aria-hidden="true"
    >
        <use :xlink:href="iconName" />
    </svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
    name: {
        type: String,
        required: true,
    },
    width: {
        type: String,
        default: '12px',
    },
    height:{
        type: String,
        default: '12px',
    },
    color: {
        type: String,
        default: '',
    }
 })
 const iconName = computed(() => `#icon-${props.name}`)
 const svgClass = computed(() => {
    if (props.name) {
        return `icon icon-${props.name}`
    }
    return `svg-icon`
 })
</script>
<style scoped lang="scss">
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: middle;
        fill: currentColor;
    }
</style>